<template>
	<view class="" style="width: 100%;min-height: 100vh;">
		<cu-custom :isBack="true" :bgColor="'var(--primaryBg)'">
			<view slot="content">核销</view>
		</cu-custom>
		<view class="box">
			<view class="head">
				<view class="title-cont">
					<view class="">
						{{item.name}}
					</view>
				</view>


				<view class="grow-record" style="margin-top: 48rpx;">
					<view class="form-box">
						

						<view class="form-item">
							<view class="left">
								宠物
							</view>
							<picker @change="bindPickerChange" mode="selector" :value="index" range-key="name"
								:range="petList">
								<view class="right flex align-center">
									<view :style="index<0?'color:#7d7d7d':''" class="name">
										{{index>=0?petList[index].name:'选择宠物(必选)'}}
									</view>
									<view class="lg text-gray cuIcon-right">

									</view>
								</view>
							</picker>
						</view>
						<view v-if="index>=0" class="form-item">
							<view class="left">
								宠物主手机号
							</view>
							<view class="right flex align-center justify-end">
								<view class="">
									<input v-model="form.telphone" disabled type="number" maxlength="11" placeholder="请输入" />
								</view>
							</view>
						</view>



						<view class="form-item">
							<view class="left">
								核销人
							</view>
							<view class="right flex align-center justify-end">
								<view class="">
									<input v-model="form.employName" type="text" maxlength="15" placeholder="输入核销人姓名(必填)" />
								</view>
							</view>
						</view>

						<view class="form-item">
							<view class="left">
								核销人手机号
							</view>
							<view class="right flex align-center justify-end">
								<view class="">
									<input v-model="form.employTel" type="number" maxlength="11" placeholder="输入核销人手机号(必填)" />
								</view>
							</view>
						</view>

					</view>

				</view>


				<view class="" style="height: 300rpx;">
				</view>

			</view>
		</view>


		<view class="bottom-box">
			<view class="num-box">
				核销后剩余次数：<text class="num">{{item.unusedNum}}次</text>
			</view>

			<view class="bottom-btn" @click="submit">
				确定
			</view>
		</view>
		
		<loginModal ref="loginModal" @loginSuccess="loginSuccess"></loginModal>
		
	</view>
</template>

<script>
	import {
		getCargoList
	} from "@/api/pet/binding/index.js"
	import {
		getOtherGrantService,
		checkService
	} from "@/api/pet/service/saler.js"
	import regRule from '@/common/rules'
	import util from '@/common/util'
	export default {
		components: {},
		data() {
			return {
				index: -1,
				form:{},
				item: {},
				pet_team:{},
				petList:[],
				issueId: '1873644182420860929',
			}
		},
		onLoad(options) {
			if (options.scene) {
				let scene = decodeURIComponent(options.scene)
				this.issueId = scene.split("=")[1]
				this.getOtherGrantService()
			}
			this.getPetTeam()
			this.reg()
			this.getOtherGrantService()
			this.getCargoList()
		},
		methods: {
			loginSuccess(){
				this.getPetTeam()
				this.getOtherGrantService()
			},
			getPetTeam(){
				this.pet_team = uni.getStorageSync('pet_team')
				if(!this.pet_team.teamId){
					uni.reLaunch({
						url: `/packagesC/pages/team/addTeam`
					});
				}
			},
			getOtherGrantService() {
				if (!util.isLogin.call(this)) {
					return
				}
				getOtherGrantService({
					type:'USER',
					issueId: this.issueId
				}).then(res => {
					this.item = res[0]
				})
			},
			getCargoList(){
				if (!util.isLogin.call(this)) {
					return
				}
				getCargoList({teamId:this.pet_team.teamId}).then(res=>{
					this.petList = res
				})
			},
			bindPickerChange(e) {
				this.index = e.detail.value
				this.form.telphone = this.petList[this.index].bindPhone
				this.form.cargoId = this.petList[this.index].id
				this.form.cargoName = this.petList[this.index].name
			},
			toPage() {
				uni.navigateTo({
					url: `/pagesPet/pages/service/saler/grant/use-succeed?item=${encodeURIComponent(JSON.stringify({
						...this.item,
						cargoId:this.form.cargoId,
					}))}`
				})
			},
			submit(){
				if(this.index<0){
					return uni.showToast({
						title:'请选择宠物',
						icon:'none'
					})
				}
				if(!this.form.employName){
					return uni.showToast({
						title:'请输入核销人姓名',
						icon:'none'
					})
				}
				if(!this.form.employTel){
					return uni.showToast({
						title:'请输入核销人手机号',
						icon:'none'
					})
				}
				if (!regRule.phone.test(this.form.employTel)){
					return uni.showToast({
						title:'核销人手机号不正确',
						icon:'none'
					})
				}
				let obj = {
					...this.form,
					serveId:this.item.id,
					serveTeamId:this.item.teamId,
					serveTeamName:this.item.teamName,
					serveName:this.item.name,
					issueId:this.item.issueId,
					unusedNum:this.item.unusedNum,
					employTeamId:this.pet_team.teamId,
				}
				checkService(obj).then(res=>{
					uni.showToast({
						title:'操作成功',
						icon:'none'
					})
					this.toPage()
				})
			},
			reg(){
				var user = uni.getStorageSync("user")
				this.form = {
					employName:user.realName,
					employTel:user.telphone,
					telphone:'',
					cargoId:'',
					cargoName:'',
				}
				this.index = -1
			},
		},
	}
</script>
<style>
	page {
		background: #f8f8f8;
	}
</style>
<style scoped lang="scss">
	.bottom-btn {
		width: 100%;
		height: 96rpx;
		background: var(--primaryBg);
		border-radius: 48rpx;
		margin-top: 20rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: var(--btnColor);
		line-height: 45rpx;
		text-align: center;
		font-style: normal;
		display: flex;
		align-items: center;
		justify-content: center;


	}

	.bottom-box {
		border-top: 1rpx solid #f8f8f8;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 249rpx;
		background: #FFFFFF;
		box-shadow: inset 0rpx 1rpx 0rpx 0rpx rgba(238, 238, 238, 0.5);
		padding: 0 32rpx;

		.num-box {
			padding-top: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: var(--h1Color);
			line-height: 37rpx;
			text-align: center;
			font-style: normal;

			.num {
				color: var(--primaryBg);
			}
		}
	}




	.box {
		width: 100%;
		display: flex;
		flex-direction: column;

		.head {
			width: 100%;
			padding: 12rpx 0 58rpx;
			height: 376rpx;
			display: flex;
			background: linear-gradient(180deg, var(--primaryBg) 0%, rgba(255, 227, 89, 0) 100%);
			display: flex;
			flex-direction: column;

			.serve-record {
				width: 718rpx;
				height: 308rpx;
				background: #FFFFFF;
				padding: 24rpx;
				margin: 72rpx 16rpx 0 16rpx;
				border-radius: 10rpx;

				.record-name {
					padding-bottom: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color:var(--h1Color);
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
					border-bottom: 1rpx solid #EEEEEE;
				}

				.record-cont {
					.record-list {
						.record-item {
							.title {
								margin-bottom: 24rpx;
								margin-top: 28rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 600;
								font-size: 32rpx;
								color: var(--h1Color);
								line-height: 45rpx;
								text-align: left;
								font-style: normal;
							}
						}

						.form-box {
							.form-item {
								margin-bottom: 12rpx;
								display: flex;
								align-items: center;

								.label {
									width: 200rpx;
									font-family: PingFangSC, PingFang SC;
									font-weight: 400;
									font-size: 28rpx;
									color: var(--h2Color);
									line-height: 40rpx;
									text-align: left;
									font-style: normal;
								}

								.value {
									font-family: PingFangSC, PingFang SC;
									font-weight: 400;
									font-size: 28rpx;
									color:var(--h2Color);
									line-height: 40rpx;
									text-align: left;
									font-style: normal;
								}
							}
						}
					}
				}
			}

			.title-cont {
				width: 100%;
				margin-top: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}

				view {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 40rpx;
					color: var(--h1Color);
					line-height: 56rpx;
					text-align: center;
					font-style: normal;
				}
			}
		}



	}




	.grow-record {
		padding: 0 24rpx;
		margin: 16rpx;
		width: 718rpx;
		background: #FFFFFF;
		border-radius: 32rpx;

		.form-box {
			// padding-bottom: 40rpx;
			// margin-bottom: 40rpx;

			.form-item {
				border-bottom: 1rpx solid #EEEEEE;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 144rpx;

				&:last-child {
					border-bottom: 0;
				}

				.left {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 30rpx;
					color: var(--h1Color);
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
				}

				.right {
					flex: 1;
					input {
						// width: 500rpx;
						height: 80rpx;
						border-radius: 8rpx;

						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						text-align: right;
						font-style: normal;
						text-align: right;

					}

					.name {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: var(--h4Color);
						line-height: 42rpx;
						text-align: right;
						font-style: normal;
					}
				}
			}
		}
	}
</style>